Pandoc and Quarto transformed classes

There are some classes which can be applied to Div (:::) and Span ([]) elements which do not result in the corresponding HTML elements <div> and <span> with the class applied, but are transformed into other elements or several elements. This has consequences for styling them.

By Pandoc

underline

[TEXT]{.underline} is transformed into <u>TEXT</u>, an “unarticulated annotation” ;-) or underline element.

mark

[TEXT]{.mark} is transformed into <mark>TEXT</mark>, a marked or highlighted text element.

By Quarto (additionally)

callout-*

::: callout-note
TEXT
:::

is transformed into

<div class="callout callout-style-default callout-note callout-titled">
  <div class="callout-header d-flex align-content-center">
    <div class="callout-icon-container">
      <i class="callout-icon"></i>
    </div>
    <div class="callout-title-container flex-fill">
      Note
    </div>
  </div>
  <div class="callout-body-container callout-body">
    <p>TEXT</p>
  </div>
</div>

aside

::: aside
TEXT
:::

is transformed into

<div class="no-row-height column-margin column-container">
  <div class="margin-aside">
    <p>TEXT</p>
  </div>
</div>

which is rendered in the right margin. Strangely,

<aside>
TEXT
</aside>

is rendered in the same way, though it is not transformed but copied as-is into the output.